<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Grid Object</title>
  <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
  <link rel="stylesheet" type="text/css" media="all" href="css/pages/page_id.css" />
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell&amp;subset=latin" />
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans&amp;subset=latin" />
  <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" media="all" href="css/style_ie6.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/ie/ie6/pages/page_node.css" />
  <![endif]-->
	<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" media="all" href="css/style_ie7.css" />
		<link rel="stylesheet" type="text/css" media="all" href="css/ie/ie7/pages/page_node.css" />
	<![endif]-->
  <!--[if IE 8]>
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/pages/page_node.css" />
  <![endif]-->
  <script type="text/javascript">google.load("jquery", "1.4.2");</script>
  <script type="text/javascript" src="js/script.js"></script>
</head>
<body class="two-sidebars">
  <div id="page" class="container-16">
    
    <div id="header">
      <div id="logo" class="axs role banner">
        <h1 id="site-name">GridObject</h1>
      </div>
            
      <div id="slogan">
        <strong>A mix between CSS grids & OOCSS</strong>
      </div>
      
      <div id="header-notes"></div>
      
    </div> <!-- header -->
    
    <div id="main" class="axs role main">
      
      <div class="box simple classic">
        <div class="inner">
          <p>Ce Framework se base sur le système des grilles de <a href="http://960.gs/">960s</a>, ainsi que sur <a href="http://wiki.github.com/stubbornella/oocss">OOCSS</a> de Nicole Sullivan.</p>
          <p>Nous utiliserons :</p>
          <ul class="simple-list">
            <li>le système des grilles 960s lors de la conception du layout et le dimensionnement des blocs.</li>
            <li>OOCSS pour l'approche objet, le modèle de boite (simple,complex) et le nommage des classes.</li>
          </ul>
          <p>Les éléments HTML respectent la notion de <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">rythme vertical</a>.</p>
			  </div>
      </div>
			
  		<div id="main-nav">
  		  <ul class="axs role navigation">
  		    <li class="home first"><a href="#"><strong>Accueil</strong> Index du site</a></li>
          <li><a href="#"><strong>Menu 2</strong> txt menu2</a></li>
          <li class="last"><a href="#"><strong>Menu 3</strong> txt menu3</a></li>
        </ul>
      </div> <!-- main-nav -->
				
      <div id="main-top">
        <div class="size-16">
          <div class="box"> 
            <div class="inner">
		          <h2>Banner</h2>
		          <strong>2 Colonnes</strong>
		          <p>Page représentant une structure 2 colonnes sur une grille de 16</p>
		          <strong>Id des colonnes</strong>
		          <ul class="simple-list">
		           <li>main-content</li>
		           <li>main-sidebar-1</li>
		          </ul>
		        </div>
          </div>
        </div>
      </div> <!-- main-top -->
      
      <div id="main-content" class="column">

       <div class="line size-12">
            
          <h2>Main content</h2>
        
          <div class="box simple classic">
            <div class="inner">
              <p>Les classes posées sur les éléments HTML de type boite (div) doivent suivre un pattern de 3, prédéfini par <em>[element][type][skin]</em> où [elem] = box, [type] = simple ou complex, [skin] = le style custom appliqué</p>
            </div>
          </div>
          
        </div>
				
        <div class="line size-12">
          <h3>Block Edito</h3>
          <div id="" class="size-4 first left">
            <h4>Title</h4>
            <img src="images/logos.png" width="71" height="44" alt="" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit egestas risus, id imperdiet massa cursus eget. Sed vitae venenatis ante. Nulla facilisi. In hac habitasse platea dictumst.</p>
          </div>
          
          <div id="" class="size-4 left">
            <h4>Title</h4>
            <img src="images/logos.png" width="57" height="45" alt="" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit egestas risus, id imperdiet massa cursus eget. Sed vitae venenatis ante. Nulla facilisi. In hac habitasse platea dictumst.</p>
          </div>
         
          <div id="" class="size-4 last left">
            <h4>Title</h4>
            <img src="images/logos.png" width="71" height="45" alt="" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit egestas risus, id imperdiet massa cursus eget. Sed vitae venenatis ante. Nulla facilisi. In hac habitasse platea dictumst.</p>
          </div>
         
        </div>
				
        <div class="line size-12">
          	
          <h3>Block Edito box simple</h3>
					<p>Chaque block possède les classes <em>box</em>, <em>simple</em> et <em>classic</em>.</p>
          <div id="" class="box simple classic size-4 first right">
            <div class="inner">
              <h4>Title</h4>
              <img src="images/logos.png" width="71" height="44" alt="" />
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit egestas risus, id imperdiet massa cursus eget. Sed vitae venenatis ante. Nulla facilisi. In hac habitasse platea dictumst.</p>
            </div>
          </div>
					
          <div id="" class="box simple classic size-4 right">
            <div class="inner">
              <h4>Title</h4>
              <img src="images/logos.png" width="57" height="45" alt="" />
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit egestas risus, id imperdiet massa cursus eget. Sed vitae venenatis ante. Nulla facilisi. In hac habitasse platea dictumst.</p>
            </div>
          </div>
				 
          <div id="" class="box simple classic size-4 last right">
            <div class="inner">
              <h4>Title</h4>
              <img src="images/logos.png" width="71" height="45" alt="" />
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit egestas risus, id imperdiet massa cursus eget. Sed vitae venenatis ante. Nulla facilisi. In hac habitasse platea dictumst.</p>
            </div>
          </div>
				 
        </div>
				
      	<div class="line size-12">
      	
      		<div class="size-4 first">
      			<div class="box simple">
      				<div class="inner">
      					<h3>Simple</h3>
                  <p>Le modèle de boîte simple sert lorsque des bordures simples en CSS sont requises.</p>
                  <pre>
&lt;div class="box simple"&gt;
  &lt;div class="inner"&gt;...&lt;/div&gt;
&lt;/div&gt;
                </pre>
      				</div>
      			</div>
      		</div>
      		
      		<div class="size-8 last">
      			<div class="box simple info"> 
      				<div class="inner">
      					<h3>Simple Info</h3>
                  <p>En ajoutant une 3ème classe à la boite simple, on ajoute une bordure CSS.</p>
                  <p>Les style des boîtes sont définis dans <em>box.css</em> pour le layout et dans la <em>box_skins.css</em> pour le skin.</p>
                  <pre>
&lt;div class="box simple info"&gt;
  &lt;div class="inner"&gt;...&lt;/div&gt;
&lt;/div&gt;
                </pre>
              </div>
      			</div>
      		</div>
        </div>
        
        <div class="line size-12">
      		
      		<div class="size-6 first">
      			<div class="box complex classic-rounded">
      				<div class="tl">
      				  <div class="tr">
      				    <div class="br">
      				      <div class="bl">
              				<div class="inner">
              				  <h3>Complex classic-rounded</h3>
              					<div class="bd">
                          <p>Le modèle de boîte complexe s'utilise pour les blocks à bordure complexe c'est-à-dire lorsque l'utilisation des bordures CSS n'est pas suffisante.</p>
                          <p>Le style <em>classic-rounded</em> est juste un skin de block complexe défini dans box_skins.css.</p>
                          <pre>
&lt;div class="box complex classic-rounded"&gt;
  &lt;div class="tl"&gt;
    &lt;div class="tr"&gt;
      &lt;div class="br"&gt;
        &lt;div class="bl"&gt;
          &lt;div class="inner"&gt;...&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
                          </pre>
              					</div>
              					<div class="bd right">
              					  <h4>Title</h4>
              					  <img src="images/logos.png" width="71" height="45" alt="" />
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit egestas risus, id imperdiet massa cursus eget. Sed vitae venenatis ante. Nulla facilisi. In hac habitasse platea dictumst.</p>
						              <ul class="custom-list classic-bullets">
						                <li>item 1</li>
						                <li>item 2</li>
						              </ul>
              					</div>
              				</div>
              		  </div>
              		</div>
      				  </div>
      				</div>
      			</div>
      		</div>
        
          <div class="size-6 last">
            <div class="box simple classic">
              <div class="inner">
                <h3>Simple Classic</h3>
                <div class="bd">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit egestas risus, id imperdiet massa cursus eget. Sed vitae venenatis ante. Nulla facilisi. In hac habitasse platea dictumst.</p>
                </div>
              </div>
            </div>
          </div>
      		
      	</div>
        
      </div> <!-- main-content  -->
			
      <div id="main-sidebar-1" class="column">
        <div class="size-4">
          <div class="box">
            <div class="inner">
              <h2>Main Sidebar 1</h2>
              <div>Les listes sont découpées en :
                <ul class="simple-list">
                  <li>liste simple où les puces héritent des styles par défaut des navigateurs</li>
                  <li>liste customisée où les puces sont remplacées par une image</li>
                </ul>
              </div>
              <p>Une classe supplémentaire peut être appliquée sur la liste afin de styler différemment les puces.</p>
              <p>Voir ci-dessous les custom list.</p>
              <h3>Simple List</h3>
              <ul class="simple-list">
                <li>item 1</li>
                <li>item 2</li>
              </ul>
              <ul class="simple-list square">
                <li>item 1</li>
                <li>item 2</li>
              </ul>
              <h3>Custom List</h3>
              <h4>Big bullets</h4>
              <ul class="custom-list big-bullets">
                <li>item 1</li>
                <li>item 2</li>
              </ul>
              <h4>Classic bullets</h4>
              <ul class="custom-list classic-bullets">
                <li>item 1</li>
                <li>item 2</li>
              </ul>
            </div>
          </div>
        </div>
      </div><!-- main-sidebar-1 -->
			
    </div> <!-- main -->
    
  	<div id="footer" class="axs role contentinfo">
      <div id="footer-nav">
    	  <ul class="axs role navigation">
          <li><a href="#">Home</a></li>
          <li><a href="#">Menu2</a></li>
          <li><a href="#">Menu3</a></li>
        </ul>
      </div> <!-- footer-nav -->
    	<div id="footer-notes">
    		<p id="copyright">Copyright &copy; 2009 - <a href="http://louvreboite.fr">louvreboite.fr</a></p>
    	</div>
    </div> <!-- footer -->
    
  </div><!-- page -->
</body>
</html>
